import React, { useState } from 'react'
import "./index.css"
export default function Item({ todo, done ,id,setTodoList,todoList}) {
  //isActive状态用来保存li的active类是否添加和按钮的display状态
  const [isActive, setIsActive] = useState(false);

  //鼠标移入li事件函数     这个也就是函数枸里化
  const mouseHandle = (bool) => {
 
  // 外层函数用来接收参数,返回的函数是真正的事件函数
   return () =>{
    setIsActive(bool)
   }
  }

    // 多选框触发改变的事件函数
    const checkChangeHandle = (e)=>{
      // console.log(checkChangeHandle);
      const newTodo =todoList.map(item =>{
        if(item.id ===id){
          item.done =e.target.checked;
        }
          return item
      })
      setTodoList(newTodo);
    }
  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive ? "active" : ""}>
      <label>
        <input type="checkbox" defaultChecked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
